<template>
  <view class="top-card">
    <view class="top-title">您想找女婿？还是找儿媳？</view>
    <view class="top-text">登记资料后，推荐才精准</view>
    <view class="top-btns">
      <custom-btn class="top-btn" :style="item.style" @click="toRegister(item.gender)" v-for="(item, index) in btns" :key="index">
        {{ item.label }}
      </custom-btn>
    </view>
  </view>

</template>
 
<script setup>
import { setItem } from "@/utils/storage";
import useStore from "@/store";
const { app } = useStore();
const boyStyle = shallowReactive({
  color: "#fff",
  fontSize: "40rpx",
  background: "linear-gradient(180deg, rgba(74, 97, 255, 0.9) 0%, #4a61ff 100%)",
});
const girlStyle = shallowReactive({
  color: "#fff",
  fontSize: "40rpx",
  background: "linear-gradient(180deg, rgba(255, 92, 85, 0.9) 0%, #ff5c55 100%)",
});
const btns = shallowReactive([
  {
    id: 1,
    gender: "女",
    label: "找女婿",
    style: boyStyle,
  },
  {
    id: 2,
    gender: "男",
    label: "找儿媳",
    style: girlStyle,
  },
]);
const btnLoaidng = ref(false);
const toRegister = (gender) => {
  const gObj = {
    女: "男",
    男: "女",
  };
  setItem("user_info", { gender: gObj[gender] });
  uni.navigateTo({ url: "/subPages/register/index?gender=" + gender });
};
</script>
 
<style lang='scss' scoped>
.top-card {
  color: $uni-text-color;
  box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 30rpx;
  background: #fff;
  padding: 80rpx 30rpx;
  text-align: center;
  margin: 20rpx;
  border: 2rpx solid #ff5c55;
  .top-title {
    font-size: 52rpx;
    font-weight: bold;
    color: $uni-title-color;
    margin-bottom: 20rpx;
  }
  .top-text {
    font-size: 40rpx;
    font-weight: 600;
    color: #eda66e;
    margin-bottom: 60rpx;
  }
}
.top-btns {
  display: flex;
  justify-content: space-between;
  .top-btn {
    width: 310rpx;
    height: 120rpx;
    color: #fff;
    border-radius: 120rpx;
    border: none;
    font-size: 40rpx;
    line-height: 120rpx;
  }
}
</style>